<!doctype html>
<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"
	language="java"%>
<%@ include file="/jsp/mobile/include/include.jsp"%>
<html lang="cn">
<head>
<%@ include file="/jsp/mobile/include/header.jsp"%>
<title>客户签名</title>
</head>
<style>
	#canvasDiv{position:absolute; width:100%; height:100%; z-index:20; top:0; left:0}
	#canvas{position:absolute;z-index:20; top:0; left:0}
</style>
<body class="nobg">
	<!-- 	<div class="head">
		<div class="auto">
			<span class="tit">客户签名</span> <a href="###" class="ico retu"></a>
		</div>
	</div> -->
	<div class="main">
		<div class="qm">
			<form id="signForm" class="qianming"
				action="<%=request.getContextPath()%>/mobile/index/incomesuccess">
				<div class="qmTx"><div id="canvasDiv"><canvas id="canvas" width="600" height="320">请在此签名</canvas></div></div>
			</form>
			<p class="mt15 f16" align="center">以上是电子签名区</p>
			<div class="nbtn mt40">
				<a id="signHref" class="butn" href="#">上传并保存签名</a>
			</div>
		</div>
	</div>

</body>
<script language="javascript">
	(function() {
		var paint = {
			init : function() {
				this.load();

			},
			load : function() {
				this.x = [];//记录鼠标移动时的X坐标
				this.y = [];//记录鼠标移动时的Y坐标
				this.clickDrag = [];
				this.lock = false;//鼠标移动前，判断鼠标是否按下
				this.isEraser = false;
				//this.Timer=null;//橡皮擦启动计时器
				//this.radius=5;
				this.storageColor = "#000000";
				this.eraserRadius = 15;//擦除半径值
				this.color = [ "#000000", "#FF0000", "#80FF00", "#00FFFF",
						"#808080", "#FF8000", "#408080", "#8000FF", "#CCCC00" ];//画笔颜色值
				this.fontWeight = [ 2, 5, 8 ];
				this.$ = function(id) {
					return typeof id == "string" ? document.getElementById(id)
							: id;
				};
				this.canvas = this.$("canvas");
				if (this.canvas.getContext) {
				} else {
					alert("您的浏览器不支持 canvas 标签");
					return;
				}
				this.cxt = this.canvas.getContext('2d');
				this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
				this.cxt.lineWidth = 5;//线条的宽度
				this.w = this.canvas.width;//取画布的宽
				this.h = this.canvas.height;//取画布的高 
				this.touch = ("createTouch" in document);//判定是否为手持设备
				this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
				this.MoveEvent = this.touch ? "touchmove" : "mousemove";
				this.EndEvent = this.touch ? "touchend" : "mouseup";
				this.bind();
			},
			bind : function() {
				var t = this;
				/*鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件*/
				this.canvas['on' + t.StartEvent] = function(e) {
					var touch = t.touch ? e.touches[0] : e;
					var _x = touch.clientX - getOffsetLeft(touch.target);//鼠标在画布上的x坐标，以画布左上角为起点
					var _y = touch.clientY - getOffsetTop(touch.target);//鼠标在画布上的y坐标，以画布左上角为起点 
					//alert(document.body.scrollLeft)
					if (t.isEraser) {
						/*
						    t.cxt.globalCompositeOperation = "destination-out";
						    t.cxt.beginPath();
						    t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);
						    t.cxt.strokeStyle = "rgba(250,250,250,0)";
						    t.cxt.fill();
						    t.cxt.globalCompositeOperation = "source-over";
						 */
						t.resetEraser(_x, _y, touch);
					} else {
						t.movePoint(_x, _y);//记录鼠标位置
						t.drawPoint();//绘制路线
					}
					t.lock = true;
				};
				/*鼠标移动事件*/
				this.canvas['on' + t.MoveEvent] = function(e) {
					var touch = t.touch ? e.touches[0] : e;
					if (t.lock)//t.lock为true则执行
					{
						var _x = touch.clientX - getOffsetLeft(touch.target);//鼠标在画布上的x坐标，以画布左上角为起点
						var _y = touch.clientY - getOffsetTop(touch.target);//鼠标在画布上的y坐标，以画布左上角为起点
						if (t.isEraser) {
							//if(t.Timer)clearInterval(t.Timer);
							//t.Timer=setInterval(function(){
							t.resetEraser(_x, _y, touch);
							//},10);
						} else {
							t.movePoint(_x, _y, true);//记录鼠标位置
							t.drawPoint();//绘制路线
						}
					}
				};
				this.canvas['on' + t.EndEvent] = function(e) {
					/*重置数据*/
					t.lock = false;
					t.x = [];
					t.y = [];
					t.clickDrag = [];
					clearInterval(t.Timer);
					t.Timer = null;

				};

			},
			movePoint : function(x, y, dragging) {
				/*将鼠标坐标添加到各自对应的数组里*/
				this.x.push(x);
				this.y.push(y);
				this.clickDrag.push(y);
			},
			drawPoint : function(x, y, radius) {
				for ( var i = 0; i < this.x.length; i++)//循环数组
				{
					this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径

					if (this.clickDrag[i] && i) {//当是拖动而且i!=0时，从上一个点开始画线。
						this.cxt.moveTo(this.x[i - 1], this.y[i - 1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点
					} else {
						this.cxt.moveTo(this.x[i] - 1, this.y[i]);
					}
					this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
					this.cxt.closePath();//context.closePath() , 如果当前路径是打开的则关闭它
					this.cxt.stroke();//context.stroke() , 绘制当前路径
				}
			},
			clear : function() {
				this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点
			},
			redraw : function() {
				/*撤销*/
				this.cxt.restore();

			},
			preventDefault : function(e) {
				/*阻止默认*/
				var touch = this.touch ? e.touches[0] : e;
				if (this.touch)
					touch.preventDefault();
				else
					window.event.returnValue = false;
			},
			getUrl : function() {
				this.$("html").innerHTML = this.canvas.toDataURL();
			},
			resetEraser : function(_x, _y, touch) {

				/*使用橡皮擦-提醒*/
				var t = this;
				//this.cxt.lineWidth = 30;
				/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/
				t.cxt.globalCompositeOperation = "destination-out";
				t.cxt.beginPath();
				t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
				t.cxt.strokeStyle = "rgba(250,250,250,0)";
				t.cxt.fill();
				t.cxt.globalCompositeOperation = "source-over"
			}

		};
		paint.init();
	})();

	function getOffsetLeft(obj) {
		var tmp = obj.offsetLeft;
		var val = obj.offsetParent;
		while (val != null) {
			tmp += val.offsetLeft;
			val = val.offsetParent;
		}
		return tmp;
	}
	function getOffsetTop(obj) {
		var tmp = obj.offsetTop;
		var val = obj.offsetParent;
		while (val != null) {
			tmp += val.offsetTop;
			val = val.offsetParent;
		}
		return tmp;
	}

	document.ontouchstart = function() {
		return false;
	}
	
	$("#signHref").bind("touchstart", function() {
		$('#signForm').submit();
	});
</script>
</body>
</html>